<script src="../asynx.js"></script>
<script src="../dom/dom.js"></script>
<script src="../impl/array.js"></script>
<script src="../impl/util.js"></script>
<script src="../impl/cookie.js"></script>
<script src="../impl/ajax.js"></script>
<script src="../impl/lang.js"></script>
<script src="../dom/xpath.js"></script>
<script src="../dom/selector.js"></script>
<script src="../event/event.js"></script>

<script src="../plugins/drag/drag.js"></script>
<script src="../plugins/animation/anim.js"></script>
<script src="../plugins/datalist/datalist.js"></script>

<!--
<script src="../asynx-min.js"></script>
<script src="../asynx-plugins-min.js"></script>
-->

<h1>asynx datalist</h1>
<div id="log" class="a">Log<br></div>
<input type="text" name="filter" id="filter"><button id='flushCache'>Flush cache</button><br><br>
<div id="DLContainer"></div>


<script>



	var dataGrid = [
		[ { text: "C df sdf sdfasdfasdf asdf asdfsdf asd asd fasdf oluna1 sdf sdf sd fdddddddddd" }, { text: "Coluna2" }, { text: "Coluna3" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1", value: "Coluna1",  icon: 'edit.gif' }, { text: "Coluna2",value: "Coluna1" }, { text: "Coluna3",value: "Coluna1" }, { text: "Coluna4", icon: "edit.gif" } ],
		[ { text: "Coluna1ssss", icon: "edit.gif" }, { text: "Coluna2sssss", icon: "edit.gif" }, { text: "Coluna3ssss", icon: "edit.gif" } ]
	];


	/*var dataSource = new asynx.datalist.DataSourceJSON(dataGrid);
	dataSource.cache = true;
	dataSource.maxResults = 100;
	dataSource.filterByFields = [ "text" ];*/
	
	var DSAjax = new asynx.datalist.DataSourceAJAX("datalist.php", "json", { aa: "dd"});
	DSAjax.maxResults = 20;
	DSAjax.cache = true;
	DSAjax.filterByFields = [ "text", "value" ];

	/*var DSAjax = new asynx.datalist.DataSourceAJAX("datalist.xml", "xml", { aa: "dd"});
	DSAjax.maxResults = 20;
	DSAjax.cache = true;
	DSAjax.filterByFields = [ "text", "value" ];*/

	var dataList = new asynx.datalist({
		
		container: 'DLContainer',
		
		gridLayout: true,
		
		highlight: 'column',
		
		fastRender: true,
		
		data: dataGrid
		
	});
	
	/*
	dataList.onRowDblClick = function(r, e) {
		log(c)
	}
	
	dataList.onColumnDblClick = function(c, e) {
		log(c)
	}
	dataList.onRowClick = function(r, e) {
		log(r.innerHTML)
	}
	*/
	
	
	
	
	
	
	
	
	
	dataList.onMouseOver = function(el, e) {
		//log(this.selectedElement.innerHTML)
		log(el + ":over")
	}
	
	dataList.onClick = function(el, e) {
		//log(this.selectedElement.innerHTML)
		log(el + ":click")
	}
	
	dataList.onDblClick = function(el, e) {
		//log(this.selectedElement.innerHTML)
		log(el + ":dbl")
	}
	
	dataList.onMouseOut = function(el, e) {
		//log(this.selectedElement.innerHTML)
		//log(e + "dddd")
	}
	dataList.onMouseDown = function(el, e) {
		//log(this.selectedElement.innerHTML)
		log(el + ":mousedown")
	}
	dataList.onMouseUp = function(el, e) {
		//log(this.selectedElement.innerHTML)
		//log(e + "dddd")
	}
	
	
	
	
	
	
	
	
	
	
	dataList.setContainerCss({
		width: "400px"
	});
	
	dataList.setTableCss({
		fontFamily: "Arial",
		fontSize: "12px"
	});
	
	//dataList.setRowCss("row");
	//dataList.setColumnCss("column");
	//dataList.setIconCss("column");
	
	dataList.create();
	
	
	/*
	dataList.setHighlightColor("#fff");
	*/
	
	asynx.event.keyup('filter', function(e,a) {
		
		var inicio = (new Date()).getTime();
		
		dataList.doQuery(asynx('filter').value);
		
		var fim = (new Date()).getTime();
		
		log(fim-inicio + "ms")
	});
	
	asynx("#flushCache").click(function() {
		DSAjax.flushCache();
	});
	
</script>

<style>
	
	.row {
		background-color: #ccc;
	}
	
	.column {
		background-color: #ff0000;
	}
	
</style>
